import React from 'react'
import {TabView,TabPanel} from 'primereact/tabview'
import {InputText} from 'primereact/inputtext'
import {Dropdown} from 'primereact/dropdown'
import {InputTextarea} from 'primereact/inputtextarea'
import { Button } from 'primereact/button'

import QRcode from '../../../../assets/image/qrcode.png'

class TransferToDetails extends React.Component{
  constructor(){
    super()

    this.state={
      transferItems:null,
      remarkValue:''
    }

    this.onTransferItemsChange=this.onTransferItemsChange.bind(this)
  }

  onTransferItemsChange(e) {
    this.setState({transferItems: e.value});
  }

  render(){
    const transferSelectItems = [
      {name: 'EOS', code: 'NY'},
      {name: 'EOS2', code: 'RM'},
      {name: 'EOS3', code: 'LDN'}
    ]

    return (
      <div className="p-g">
        <div className="p-g-12">
          <div>转账币名</div>
        </div>
        <div className="p-g-12">
          <Dropdown 
            value={this.state.transferItems} 
            options={transferSelectItems} 
            onChange={this.onTransferItemsChange} 
            style={{width:'100%'}} 
            placeholder="EOS" 
            optionLabel="name"
          />
        </div>

        <div className="p-g-12">
          <div>账户名称</div>
        </div>
        <div className="p-g-12">
          <span className="p-fluid">
            <InputText placeholder="请输入转出账户" />
          </span>
        </div>

        <div className="p-g-12">
          <div>转账数量</div>
        </div>
        <div className="p-g-12">
          <span className="p-fluid">
            <InputText placeholder="请输入转出金额" />
          </span>
        </div>

        <div className="p-g-12">
          <span className="p-fluid">
            <InputTextarea 
              rows={3}
              value={this.state.remarkValue} 
              onChange={(e) => this.setState({remarkValue: e.target.value})} 
              autoResize={true}
              placeholder="备注信息"
            />
          </span>        
        </div>

        <div className="p-g-12 fc-toolbar">
            <Button label="确认转账"className="p-button-raised p-button-rounded" />
        </div>

      </div>
    )
  }
}

class TransferFormDetails extends React.Component{
  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <div>收款金额</div>
        </div>
        <div className="p-g-12">
          <span className="p-fluid">
            <InputText placeholder="请设置收款金额" />
          </span>
        </div>

        <div className="p-g-12">
          <div style={{textAlign:'center'}}>
            <div style={{fontSize:'1.5em', fontWeight:'bold'}}>zuowen123133</div>
            <a href="#">复制收款账户</a>
            <p>
              <img width='150' height='150' src={QRcode} />
            </p>
          </div>
        </div>
      </div>
    )
  }
}

class Transfer extends React.Component{
  constructor(){
    super()

    this.state={
      activeIndex:0
    }
  }
  render(){
    return (
      <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
        <TabPanel header="转账">
            <TransferToDetails />
        </TabPanel>
        <TabPanel header="收款">
            <TransferFormDetails />
        </TabPanel>
      </TabView>
    )
  }
}

export default Transfer